<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="stylesheet" href="../CSS/common.css">
    <link rel="stylesheet" href="../CSS/top.css">
    <link rel="stylesheet" href="../CSS/swiper-bundle.min.css">
    <link rel="stylesheet" href="../CSS/home.css">
    <link rel="stylesheet" href="../CSS/botton.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <span>吃了么</span>
        </header>
        <!-- 搜索 -->
        <section class="section">
            <a href="./SouSuo.html"><input type="text" placeholder="请输入商品"></a>
            <img src="../img/bj.jpg" alt="" class="img-2">
            <div class="div-1">
                <a href="./CaiPu.html">
                    <img src="../img/xx.png" alt="">
                    <span>新鲜</span>
                </a>
                <a href="#">
                    <img src="../img/jk.png" alt="">
                    <span>健康</span>
                </a>
                <a href="#">
                    <img src="../img/mw.png" alt="">
                    <span>美味</span>
                </a>
            </div>
        </section>
        <!--三餐推出  -->
        <section class="warp">
            <div class="Sancan">
                <div class="div-cc"></div>
                <span>三餐推出</span>
            </div>
            <div class="cai-1">
                <a href="./ZaoCan.html" style="color: #2dc254;">
                    <img src="../img/zaocan.png" alt="">
                    早餐
                </a>
                <a href="#" style="color: #ea6676;">
                    <img src="../img/wucan.png" alt="">
                    午餐
                </a>
                <a href="#" style="color: #f2b674;">
                    <img src="../img/wancan.png" alt="">
                    晚餐
                </a>
            </div>

        </section>
        <!-- 精品推出 -->
        <section class="warp-1">
            <div class="Sancan-1">
                <div class="div-cc-1"></div>
                <span>精品推出</span>
            </div>
            <div class="nav-Xuan-2">
                <!-- Swiper -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in list">
                            <img :src="item.URL" alt="">
                            <h5> {{item.mane}} </h5>
                            <div class="div-p">
                                <p>￥{{item.money}} </p>
                                <p>￥{{item.price}} </p>
                                <img :src="item.gw" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--人气优选 -->
        <section class="warp-2">
            <div class="Sancan">
                <div class="div-cc"></div>
                <span>人气优选</span>
            </div>
            <div class="div-r" v-for="item in lists">
                <img :src="item.URL" alt="">
                <div class="div-you">
                    <span>{{item.text}} </span>
                    <p style="color: rgb(156, 156, 156);"> 月售{{item.dan}}单&nbsp;&nbsp;好评{{item.ping}}%</p>
                    <img :src="item.URLS" alt="" class="img-1">
                    <p class="hui-p">会员价8.8折</p>
                    <p style="color: rgb(211, 154, 154);">￥{{item.money}}</p>
                    <p>￥{{item.moneys}}</p>
                    <img :src="item.URLX" alt="" class="img-2">
                </div>
            </div>
        </section>
        <!-- 精品推出 -->
        <section class="warp-3">
            <div class="Sancan">
                <div class="div-cc"></div>
                <span>精品推出</span>
            </div>
            <div class="div-x">
                <div v-for="item in  jingPin">
                    <img :src="item.url" alt="" class="img-x">
                    <p style="font-size: 0.8rem;margin: 0.4rem 0  0.4rem 0.5rem;"> {{item.text}} 约{{item.ke}} g</p>
                    <img src="../img/hyze.png" alt="" class="img-h">
                    <p class="xh-p"> 会员{{item.hui}} 折</p>
                    <p class="xh-pp" style="color: rgb(228, 154, 195);">￥{{item.money}}</p>
                    <del class="xh-pp">￥{{item.moneys}}</del>
                    <img src="../img/gwm.png" alt="" class="img-xh">
                </div>
            </div>

        </section>
        <!-- 底部导航 -->
        <footer class="footer">
            <a href="#" class="footer-2">
                <img src="../img/sy2.png" alt="">
                首页
            </a>
            <a href="./FenLei.html" class="footer-2">
                <img src="../img/fl.png" alt="">
                分类
            </a>
            <a href="./GouWu.html" class="footer-2">
                <img src="../img/guc.png" alt="">
                购物车
            </a>
            <a href="./WoDe.html" class="footer-2">
                <img src="../img/wd.png" alt="">
                我的
            </a>

        </footer>

    </div>
    <script src="..//JS/flexible.js"></script>
    <!-- <script src="../jS/swiper-bundle.min.js"></script> -->
    <script src="../JS/vue3.js"></script>

    <script type="module">
        // import Swiper from '../JS/swiper-bundle.esm.browser.min.js'
        import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js'
        const app = Vue.createApp({
            data() {
                return {               
                    list: [],       
                    lists: [],
                    jingPin:[]
                }
            },
            mounted() {
                // 1
                fetch('../JSON/list.json').then(res => res.json()).then(res => {
                    console.log(res);
                    this.list = res
                })
                // 2
                fetch('../JSON/listaNav.json').then(res => res.json()).then(res => {
                    console.log(res);
                    this.lists = res
                })
                // 3
                fetch('../JSON/jingPin.json').then(res => res.json()).then(res => {
                    console.log(res);
                    this. jingPin = res
                })
                new Swiper(".mySwiper", {
                    observer: true, 
                observeParents: true,
        slidesPerView: 2.5,
        spaceBetween: 10,
       
      });
            },
        }).mount("#app")
     
      
    </script>
</body>

</html>